<!--  -->
<template>
  <div :id="id" :style="{ 'height': height, 'width': width }"></div>
</template>

<script setup lang="ts">
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as echarts from "echarts";

type Props = {
  id?:string,
  height?:string,
  width?:string,
  isXYReplace?:boolean,
  isShowBackground?:boolean,
  dataNameList?:any,
  dataList?:any,
  mainColor?:any,
  unit?:string,
  grid?:any,
  rowCount?:number
  total?:string
}
let props = withDefaults(defineProps<Props>(),{
  id:'main',
  height:'100%',
  width:'100%',
  isXYReplace:false,
  isShowBackground:false,
  dataNameList:[],
  dataList:[],
  mainColor:["#FCCB57"],
  unit:'',
  grid:{
        bottom:30
      },
  rowCount:100,
  total:''
})
let  myChart =ref(null)
let seriesList = computed(()=>{
  let arr = props.dataList.map(el => {
        console.log("lai", el);
        // 是否分割图形,变成像电池一样
        let sliceBar =el.isSlice?{
          type: "pictorialBar",
          symbolRepeat: "fixed",
          symbolMargin: 1, //图形的两边间隔
          symbol: "rect",
          symbolClip: true, //是否裁剪图形
          symbolSize: [4, 20],
          symbolPosition: "start", //图形的定位位置。
          symbolOffset: [-2, 0],
        }:{}
        return {
          data: el.data,
          type:'bar',
          ...sliceBar,
          //  柱装图宽度
          barWidth: el.barWidth,
          name: el.name,
          // 是否有背景色
          showBackground: props.isShowBackground,
          // 背景色色彩
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)"
          },
          //虚线柱状图
          // barGap: '-100%',
          // barWidth: 10,
          // z: -12,
          
          // 顶部数字
          label: {
            normal:{
              show: el.isShowTopLabel, //开启显示
                position: `${props.isXYReplace?'right':'top'}`, //在上方显示
                textStyle: {
                  //数值样式
                  color: "black",
                  fontSize: 12
                }
              }
            },   
              // 渐变色
          itemStyle: {
            color: el.gradient?new echarts.graphic.LinearGradient(0, 0, 0, 1, el.gradient):undefined
          }
        };
      });
      return arr;
})
const getEqualNewlineString=(params, length)=> {
      let text = "";
      let count = Math.ceil(params.length / length); // 向上取整数
      // 一行展示length个
      if (count > 1) {
        for (let z = 1; z <= count; z++) {
          text += params.substr((z - 1) * length, length);
          if (z < count) {
            text += "\n";
          }
        }
      } else {
        text += params.substr(0, length);
      }
      return text;
    }
const  ecahrtinitial=()=> {
      let rowCountObj={
        interval: 0,
        formatter:(val)=>{
          return getEqualNewlineString(val,props.rowCount)
        }
      }
      myChart.value = echarts.init(document.getElementById(props.id));
      let option;
      option = {
        title:{
          subtext:props.unit,
          top:-10,
          right:10
        },
        color: props.mainColor,
        legend: {},
        grid: props.grid,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          type: `${props.isXYReplace ? "value" : "category"}`,
          data: props.isXYReplace ? undefined : props.dataNameList,
          // name: `${this.isXYReplace ? this.unit : ""}`,
          axisLabel:props.isXYReplace ? {} : rowCountObj
        },
        yAxis: {
          type: `${props.isXYReplace ? "category" : "value"}`,
          data: props.isXYReplace ? props.dataNameList : undefined,
          // name: `${this.isXYReplace ? "" : this.unit}`,
          axisLabel:props.isXYReplace ?  rowCountObj : {}
        },
        series: seriesList.value
      };

      option && myChart.value.setOption(option);
    }
watch(()=>props.dataList,()=>{
  ecahrtinitial()
},{deep:true})

  //生命周期 - 挂载完成（可以访问DOM元素）
  onMounted(()=>{
    ecahrtinitial()
  }) 
</script>
<style lang="css" scoped></style>
